<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>todolist</title>
    <style type="text/css">
        .list_con {
            width: 600px;
            margin: 50px auto 0;
        }
        
        .inputtxt {
            width: 550px;
            height: 30px;
            border: 1px solid #ccc;
            padding: 0px;
            text-indent: 10px;
        }
        
        .inputbtn {
            width: 40px;
            height: 32px;
            padding: 0px;
            border: 1px solid #ccc;
        }
        
        .list {
            margin: 0;
            padding: 0;
            list-style: none;
            margin-top: 20px;
        }
        
        .list li {
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #ccc;
        }
        
        .list li span {
            float: left;
        }
        
        .list li a {
            float: right;
            text-decoration: none;
            margin: 0 10px;
        }
    </style>
    <script src="js/vue.js"></script>
</head>

<body>

    <div class="list_con">
        <h2>To do list</h2>
        <input type="text" name="" id="txt1" class="inputtxt" v-model='jia'>
        <input type="button" name="" value="增加" id="btn1" class="inputbtn" @click='add'> 共有{{huo}}件事情
        <ul id="list" class="list">
            <li v-for='(item,i) in list' :key='i'>
                <span>{{item}}</span>
                <a href="javascript:;" class="up" @click='up(i)'> ↑ </a>
                <a href="javascript:;" class="down" @click='down(i)'>↓</a>
                <a href="javascript:;" class="del" @click='cler(i)'>删除</a>
            </li>
        </ul>
    </div>
    <script>
        var list_con = new Vue({
                el: '.list_con',
                data: {
                    list: ['学习HTML', '学习CSS', '学习JavaScript'],
                    jia: ''
                },
                methods: {
                    add: function() {
                        if (this.jia.length != 0) {
                            this.list.unshift(this.jia)
                        }
                        this.jia = ''
                    },
                    cler: function(i) {
                        this.list.splice(i, 1)
                    },
                    up: function(i) {
                        if (i > 0) {
                            var clerUp = this.list[i]
                            this.list.splice(i, 1)
                            this.list.splice(i - 1, 0, clerUp)
                        }
                    },
                    down: function(i) {
                        if (i < this.list.length) {
                            var clerDown = this.list[i]
                            this.list.splice(i, 1)
                            this.list.splice(i + 1, 0, clerDown)
                        }

                    }
                },
                computed: {
                    huo: function() {
                        return this.list.length
                    }
                }
            })
            // 需求: 
            // 1.先定义数据, 将界面中的html,css,javascript使用v-for的方式循环渲染出来
            // 2.完成增加数据的功能, 增加的数据需要位于数组的第0个位置
            // 3.实现删除的功能
            // 4.实现点击向上箭头, 向下箭头改变顺序的功能
            // 5.将  共有3件事情  中的3变活
    </script>
</body>

</html>